<template>
  <div>
    <div class="nav">
      <ul class="nav-centent">
        <li v-for="(item,index) in items"
            @mouseover="selectStyle (item)"
            @mouseout="outStyle(item)">
          <a :href="item.href" :class="item.id">{{item.name}}</a>
          <ul v-show="item.isSubShow">
            <li v-for="subItems in item.subItems">
              <a href="#">{{subItems.name}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

</template>
<script type="text/javascript">
  export default {
    name:'demo3',
    data() {
      return {
        nowIndex: 0,
        items: [
          {
            name: '首页',
            isSubShow: false,
            subItems: []
          },
          {
            name: '精选路线',
            isSubShow: false,
            subItems:
              [
                {
                  name: '马尔代夫'
                },
                {
                  name: '索马里海峡'
                }
                ,
                {
                  name: '丽江 / 昆明'
                },
                {
                  name: '天安门 / 故宫'
                }
              ]
          },
          {
            name: '关于我们',
            isSubShow: false,
            subItems:
              [
                {
                  name: '企业简介'
                },
                {
                  name: '未来规划'
                }
                ,
                {
                  name: '企业动态'
                }
              ]
          },
          {
            name: '旅游攻略',
            isSubShow: false,
            subItems:
              [
                {
                  name: '热门攻略'
                },
                {
                  name: '经济攻略'
                }
                ,
                {
                  name: '青年攻略'
                }
                ,
                {
                  name: '老年攻略'
                }
                ,
                {
                  name: '吃货必看'
                }
              ]
          },
          {
            name: '定制旅游',
            isSubShow:
              false,
            subItems:
              [
                {
                  name: '普通定制'
                },
                {
                  name: '豪华专线'
                }
                ,
                {
                  name: '情侣必备'
                }
              ]
          }
        ]
      }
    },
    methods: {
      selectStyle: function (item) {
        item.isSubShow = true
      },
      outStyle(item) {
        item.isSubShow = false
      }
    }
  }

</script>
<style type="text/css" scoped>
  .nav {
    width: 100%;
    height: 50px;
    background: #48B246;
  }

  .nav .nav-centent {
    width: 1200px;
    margin: 0 auto;
    height: 50px;
  }

  .nav .nav-centent > li {
    width: 120px;
    height: 50px;
    display: block;
    float: left;
    text-align: center;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
  }

  .nav .nav-centent li a {
    width: 120px;
    height: 50px;
    display: block;
    font-size: 18px;
    line-height: 50px;
    color: #fff;
  }

  .nav .nav-centent ul {
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 99;
    width: 100%;
  }

  .nav .nav-centent ul li {
    width: 120px;
    height: 50px;
    display: block;
    float: left;
    text-align: center;
    margin-right: 20px;
    line-height: 50px;
    background: #46B148;
  }

  .nav .nav-centent ul li a:hover {
    background: #fff;
    color: #48B246;
  }

  .nav .nav-centent li a:hover {
    background: #fff;
    color: #48B246;
  }

  .nav .nav-centent li a.on {
    background: #fff;
    color: #48B246;
  }


</style>
